import React, { useState, useEffect } from'react';
import './wenzhen.css';
import axios from 'axios';
import { LeftOutline } from 'antd-mobile-icons';
import { useNavigate } from "react-router-dom";
// 挂号记录组件
function tijian() {
    const navigate = useNavigate();
    const [list, setList] = useState([]);
    const [catelist, setCateList] = useState([]);
    const [selectedCate, setSelectedCate] = useState(null);
    const [cate, setCate] = useState('');

    useEffect(() => {
        getList();
        getCate();
    }, []);

    const getList = async () => {
        let data = await axios.get(`http://127.0.0.1:3000/qjx_wenzhen?cate=${cate}`);
        console.log(data);
        setList(data.data.data);
    };

    const getCate = async () => {
        let data = await axios.get(`http://127.0.0.1:3000/qjx_cates`);
        console.log(data);
        setCateList(data.data.data);
    };

    const filteredList = selectedCate
     ? list.filter(item => item.cate && item.cate.toString() === selectedCate.toString())
        : list;

    return (
        <div className="qjx_container">
            <div className='y_one'>
                <p style={{ marginTop: '3px' }} onClick={() => navigate('/home/mind')}>
                    <LeftOutline fontSize={24} />
                </p>
                <h2>我的问诊</h2>
            </div>
            {/* 渲染分类数据 */}
            <div className="qjx_category">
                <ul className="qjx_list">
                    {catelist.map(c => (
                        <li key={c._id}
                            onClick={() => {
                                setCate(c._id);
                                getList();
                            }}
                            className={c._id === cate? 'qjx_item qjx_active' : 'qjx_item'}
                        >
                            {c.name}
                        </li>
                    ))}
                </ul>
            </div>
            {/* 渲染挂号记录数据 */}
            <div className="qjx_record">
                <h2 className="qjx_subheader">问诊记录列表</h2>
                <ul className="qjx_list">
                    {filteredList.map(item => (
                        <li key={item._id} className="qjx_item qjx_lis">
                            <h3 className="qjx_title">{item.title}</h3>
                            <p className="qjx_subtitle">职业: {item.zhiye}</p>
                            <p className="qjx_description">描述: {item.neirong}</p>
                            <p className="qjx_price">价格: {item.zhifu}</p>
                            <p className="qjx_timeleft">剩余时间: {item.time}</p>
                            {/* <p>分类: {item.cate.name}</p> */}
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
}

export default tijian;